<template>
  <div class="tab-content">
    <el-tabs
      v-if="props.id !== ''"
      model-value="form"
      type="card"
      class="demo-tabs"
    >
      <el-tab-pane label="权限" name="form">
        <privilege-form :id="props.id" :hideClose="'hide'" @reload-data="reloadData" />
      </el-tab-pane>
      <el-tab-pane label="角色" name="role">
        <privilege-role-list :fid="props.id"/>
      </el-tab-pane>
      <el-tab-pane label="人员" name="user">
        <privilege-user-list :fid="props.id" />
      </el-tab-pane>
    </el-tabs>

    <privilege-list v-else :fid="props.fid" @reload-data="reloadData" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import privilegeList from '@/views/system/privilege/PrivilegeList.vue'
import privilegeForm from '@/views/system/privilege/PrivilegeForm.vue'
import privilegeRoleList from '@/views/system/privilege/PrivilegeRoleList.vue'
import privilegeUserList from '@/views/system/privilege/PrivilegeUserList.vue'

const emit = defineEmits(['reload-data'])
const props = defineProps({ fid: String, id: String })
const activeName = ref('form')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const reloadData = () => {
  emit('reload-data')
}

</script>
<style scoped>
.tab-content{
  padding: 5px;
}
</style>
